<template>
  <view class="member-add" v-cloak>
    <view class="add-card">
      <view class="card-item">
        <view class="item-label">居民证件类型</view>
        <view>居民身份证</view>
      </view>
      <view class="card-item">
        <view class="item-label">诊疗人姓名</view>
        <input type="text" class="input" v-model="query.familyName" placeholder="请输入姓名" />
      </view>
      <view class="card-item">
        <view class="item-label">诊疗人身份证号</view>
        <input type="text" class="input" v-model="query.familyIdCard" placeholder="请输入身份证号" />
      </view>
      <view class="card-item">
        <view class="item-label">诊疗人手机号</view>
        <input type="text" class="input" v-model="query.familyMobile" maxlength="11" placeholder="请输入手机号" />
      </view>
      <view class="card-item">
        <view class="item-label">验证码</view>
        <input type="text" class="input" v-model="query.code" placeholder="请输入短信验证码" />
        <view class="item-button" :class="btnStatus != '获取验证码'?'disabled':''" @click="handleGetCode()">{{btnStatus}}</view>
      </view>
      <view class="card-item">
        <view class="item-label">家庭角色</view>
        <input type="text" class="input" v-model="query.familyRoleCode" placeholder="请输入家庭角色" />
      </view>
    </view>
    <view class="add-footer">
      <view class="button" @click="handleSubmit()">提交</view>
      <view class="button reset" @click="query = {}">重置</view>
    </view>
  </view>
</template>

<script>
  import {fVailPhone} from '@/utils/Tools.js'
  export default {
    data() {
      return {
        query:{},
        btnStatus:'获取验证码',
        time:60,
      };
    },
    methods:{
      handleGetCode(){  ///  获取验证码
        const phoneRes = fVailPhone(this.query.familyMobile)
        if(phoneRes && this.btnStatus == '获取验证码'){
          const data = {recv:this.query.familyMobile,"verifyValue":"11111"}
          this._sendLoginCode(data)
        }
      },
      async _sendLoginCode(data){  ///  获取验证码
        clearInterval(timer)
        let timer;
        const res = await this.$post('/notification/codes/auth',data)
        if(res.code == '1'){
          this.$toast('获取验证码成功','success')
          timer = setInterval(()=>{
            if(this.time == 1){
              this.btnStatus = '获取验证码'
              this.time = 60
              clearInterval(timer)
              return;
            };
            this.btnStatus = `${--this.time}s`
          },1000)
        }else{
          this.$toast(res.message,'none')
        }
      },
      handleSubmit(){
        uni.showLoading({
          title:'加载中...'
        })
        const data = {
          ...this.query
        }
        if(!data.familyName) return this.$toast('请输入姓名')
        if(!data.familyIdCard) return this.$toast('请输入身份证号')
        if(!data.familyMobile) return this.$toast('请输入手机号')
        if(!data.code) return this.$toast('请输入验证码')
        if(!data.familyRoleCode) return this.$toast('请输入家庭角色')
        this.$post('/yahe/userFamily/save',data,'1').then(res=>{
          if(res.code == '1'){
            this.$toast('添加成功')
            setTimeout(()=>{
              const {content} = res
              uni.redirectTo({
                url:`/doctorPackage/add-success?name=${content.familyName}&id=${content.familyUserId}`
              })
            },1000)
          }else{
            this.$toast(res.message)
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.member-add{
  padding: 24rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--page-bg);
  .add-card{
    background: #fff;
    border-radius: 20rpx;
    padding: 0 24rpx;
    .card-item{
      padding: 34rpx 0;
      line-height: 1;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      border-bottom: 2rpx solid #efefef;
      &:last-child{
        border: 0;
      }
      .item-label{
        color: var(--title-color);
        margin-right: auto;
      }
      .input{
        text-align: right;
      }
      
      .item-button{
        padding: 16rpx 12rpx;
        background-color: var(--theme-color);
        color: #fff;font-size: 24rpx;
        border-radius: 8rpx;
        text-align: center;
        margin-left: 12rpx;
        &.disabled{
          background: #ccc;
          color: #666;
        }
      }
    }
  }
  
  .add-footer{
    margin-top: 120rpx;
    padding: 0 84rpx;
    .button{
      color: #fff;
      font-size: 28rpx;
      line-height: 80rpx;
      border-radius: 80rpx;
      text-align: center;
      background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      margin-bottom: 32rpx;
      &.reset{
        background: #fff;
        color: var(--title-color);
        border: 2rpx solid var(--border-color);
      }
    }
  }
}
</style>
